<!--
  @Descripttion:其他服务-往期活动
  @Author：yuzhongfeng
  @Date：2022年10月17日 21:45:40
-->
<template>
  <section class="page">
    <div class="container">
      <div class="title" style="height: 160px; padding-top: 50px">
        <div class="title_left">
          <div class="title_left_top">Visit and exchange</div>
          <div class="title_left_bot">参访交流</div>
        </div>
        <div class="lines"></div>
        <div class="title_right ts">
          为了加深国内外大学生对金融科技的关注与了解，培养优秀的金融科技人才，数据学徒团队发起了企业学习交流活动，带领同学们参观过的众多的龙头企业和知名单位。
        </div>
      </div>
      <div class="container_item">
        <div
          class="item"
          :class="index == 0 ? 'item_1' : ''"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <div class="txtBox" :style="`order:${item.order}`">
            <div
              class="titles"
              :style="item.order ? '' : 'justify-content: flex-end;'"
            >
              <img
                :src="
                  require(`../../../assets/images/otherServices/num_${
                    index + 1
                  }.png`)
                "
                alt=""
              />
              {{ item.title }}
            </div>
            <div class="content" v-for="(it, i) in item.content" :key="i">
              {{ it }}
            </div>
          </div>
          <div class="imgBox">
            <img
              :style="`width: ${item.width};height: ${item.height};`"
              :src="
                require('../../../assets/images/otherServices/previousActivities/img (' +
                  (index + 2) +
                  ').png')
              "
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="title" :style="`width:${clientWidth};left:-${left}px`">
        <div class="title_left">
          <div class="title_left_top">Forum meetings</div>
          <div class="title_left_bot">论坛会议</div>
        </div>
      </div>
      <div class="container_item" style="padding-top: 0">
        <div class="item2">
          <div class="left">
            <div class="img_box" style="width: 449px; margin-top: 119px">
              <img
                style="margin-bottom: 14px; width: 100%"
                src="../../../assets/images/otherServices/previousActivities/img (13).png"
                alt=""
                srcset=""
              />
              <div class="txts" style="margin-bottom: 85px">
                金融科技跨界融合高峰论坛
              </div>
            </div>
            <div class="img_box" style="width: 372px">
              <img
                style="margin-bottom: 14px; width: 100%"
                src="../../../assets/images/otherServices/previousActivities/img (12).png"
                alt=""
                srcset=""
              />
              <div class="txts">金融科技企业的创新与发展高峰论坛</div>
            </div>
          </div>
          <img
            class="step"
            src="../../../assets/images/otherServices/previousActivities/step1.png"
            style="height: 853px"
          />
          <div class="right">
            <div class="img_box" style="width: 432px; margin-top: 25px">
              <img
                style="margin-bottom: 14px; width: 100%"
                src="../../../assets/images/otherServices/previousActivities/img (14).png"
                alt=""
                srcset=""
              />
              <div class="txts" style="margin-bottom: 60px">
                数据合规圆桌论坛
              </div>
            </div>
            <div class="img_box" style="width: 454px">
              <img
                style="margin-bottom: 14px; width: 100%"
                src="../../../assets/images/otherServices/previousActivities/img (15).png"
                alt=""
                srcset=""
              />
              <div class="txts">七国央行关于数字货币应用论坛</div>
            </div>
          </div>
        </div>
      </div>
      <div class="title" :style="`width:${clientWidth};left:-${left}px`">
        <div class="title_left">
          <div class="title_left_top">Various events</div>
          <div class="title_left_bot">各种赛事</div>
        </div>
      </div>
      <div class="container_item" style="padding-top: 0">
        <div class="item2">
          <div class="left">
            <div class="img_box" style="width: 498px; margin-top: 121px">
              <img
                style="margin-bottom: 14px; width: 100%"
                src="../../../assets/images/otherServices/previousActivities/img (18).png"
                alt=""
                srcset=""
              />
              <div class="txts" style="margin-bottom: 88px">
                “数据产业化、产业数据化”国际大学生大赛
              </div>
            </div>
            <div class="img_box" style="width: 290px">
              <img
                style="margin-bottom: 14px; width: 100%"
                src="../../../assets/images/otherServices/previousActivities/img (19).png"
                alt=""
                srcset=""
              />
              <div class="txts">卫星遥感数据处理大赛</div>
            </div>
          </div>
          <img
            class="step"
            src="../../../assets/images/otherServices/previousActivities/step2.png"
            style="height: 728px"
          />
          <div class="right">
            <div class="img_box" style="width: 483px; margin-top: 30px">
              <img
                style="width: 100%"
                src="../../../assets/images/otherServices/previousActivities/img (16).png"
                alt=""
                srcset=""
              />
            </div>
            <div class="img_box" style="width: 483px">
              <img
                style="margin-bottom: 14px; width: 100%"
                src="../../../assets/images/otherServices/previousActivities/img (17).png"
                alt=""
                srcset=""
              />
              <div class="txts">国际大学生金融科技创新大赛</div>
            </div>
          </div>
        </div>
      </div>
      <div class="title" :style="`width:${clientWidth};left:-${left}px`">
        <div class="title_left">
          <div class="title_left_top">Internship employment</div>
          <div class="title_left_bot">实习录用</div>
        </div>
        <div class="title_right ts2">(实习OFFER颁发)</div>
      </div>
      <div class="container_item">
        <div class="item3">
          <div
            class="item3_items"
            v-for="(item, index) in dataList2"
            :key="index"
          >
            <img
              :src="
                require(`../../../assets/images/otherServices/previousActivities/img (${
                  index + 20
                }).png`)
              "
              alt=""
            />
            <p>{{ item }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  // 组件名称
  name: "otherServices",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  // 组件状态值
  data() {
    return {
      dataList: [],
      dataList2: [],
      clientWidth: 1440,
      left: 0,
    };
  },
  computed: {},

  // 组件方法
  methods: {
    init() {
      this.dataList = [
        {
          title: "香港证券交易所",
          content: [
            "交易所成员介绍香港联合交易所有限公司（The Stock Exchange of Hong Kong Ltd.）简称SEHK，是香港证监会所认可的交易公司，为香港交易及结算所有限公司（简称港交所）全资附属公司，是香港最早的证券交易所。经历过多次牛市、股灾，与1998年亚洲金融风暴，香港证券市场渐趋成熟。同学们此行对交易所在企业上市、二级市场以及交易所大数据应用有着更深入的了解，收获颇丰。",
          ],
          width: "437px",
          height: "100%",
          order: 3,
        },
        {
          title: "深圳证券交易所",
          content: [
            "在深圳证券交易所（以下简称“深交所”）的交流活动中，工作人员为大家详细介绍深交所的发展历程和中国与世界资本市场的演变。当大家目睹了中国资本市场从姓“社”还是姓“资”的探讨，到改革开放后的繁荣景象，无不为国家的发展和强大倍感自豪。此外，同学们还了解到了大数据、金融科技、市场监管等领域的最前沿知识，加深了对数据应用和金融科技的理解和认识。",
          ],
          width: "522px",
          height: "231px",
        },
        {
          title: "香港科学园",
          content: [
            "香港科学园邻近香港中文大学，更类似大学校园的低密度规划，以高科技及应用科技为主题的研究基地。诸多大数据、人工智能、金融科技以及生物公司已经入驻香港科学园。园区大量选用支持生态可持续发展的原料制造的环保物料，建筑物采用低层式园林设计，布局优美，前临吐露港前景，景色怡人。学生们此番行程参观光纤之父展馆，绿里程及绿景楼，领略绿能科技的魅力。",
          ],
          width: "440px",
          height: "209px",
          order: 3,
        },
        {
          title: "招商银行总行",
          content: [
            "招商银行于1987年成立于深圳蛇口，自2012年已来，已连续7年入围《财富》世界500强，是中国境内最具影响力的商业银行之一。同学们在馆长的带领下首先参观了行史陈列馆。馆内陈列了三十年来招行发展的一手宝贵史料，不仅让同学们深入了解了招商银行开拓创新、向阳而立的成长史，更从历史切片中感受到改革开放40年来时代的沧桑巨变。在交流讨论环节中，相关负责人分享了互联网时代招商银行对金融科技的战略布局和人才培养方针，体现了招商银行独特的FinTech基因。",
          ],
          width: "440px",
          height: "185px",
          order: 3,
        },
        {
          title: "大疆",
          content: [
            "大疆创新科技有限公司于2006年在深圳市成立，致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。在讲解员的带领下，同学们深入了解了大疆的各类高科技产品，以及无人机技术在农业、测绘等方面的创新应用和最前沿技术。最后，同学们还亲自体验了一把操控无人机，“零距离”体验高科技的魅力。",
          ],
          width: "593px",
          height: "207px",
        },
        {
          title: "众安保险",
          content: [
            "众安在线财产保险股份有限公司（下简称：众安）是全球首家互联网保险公司，也是一家以技术创新带动金融发展的金融科技公司。同学们首先参观了众安怡人的工作环境——360度无敌海景职场，抬首即可将整个深圳湾的景色尽收眼底。随后，众安保险的首席技术专家和HR负责人出席了本次活动，从众安的技术发展内核、公司招聘岗位与福利以及自身发展经验等方面，与同学们展开了亲切的交流和讨论。",
          ],
          width: "593px",
          height: "269px",
        },
        {
          title: "腾讯",
          content: [
            "腾讯——中国最大的互联网综合服务提供商之一。在工作人员的介绍下，大家了解了腾讯的发展里程与业务布局，以及其“用户为本 科技向善”的公司使命，体验了展览馆中的各类科技游戏。在最后的环节，工作人员通过模型和视频介绍的形式向同学们介绍了腾讯未来的发展宏图，其中先进的数据应用技术和创新项目令在场的同学们叹为观止。",
          ],
          width: "439px",
          height: "243px",
          order: 3,
        },
        {
          title: "前海管理局展厅&前海会议中心",
          content: [
            "通过参观前海管理局展厅和会议中心，加深了同学们对深圳前海未来发展的认识。前海合作区集金融业、现代物流业、信息服务业、科技服务业、专业服务业、公共服务业六大领域；依托香港、服务内地、面向世界，将成为深圳未来的明珠。前海会议中心为“深圳经济特区建立40周年庆祝大会”举办场地，二楼大会堂保留了庆祝大会举办时的原貌，同学们纷纷激动地在此拍照留念。",
          ],
          width: "485px",
          height: "273px",
        },
        {
          title: "香港中文大学",
          content: [
            "香港中文大学被誉为“世界最美丽的校园之一”， 依山而建的校园，神秘而不失热情，稳重却饱含激情。香港中文大学在数据科学、金融科技等领域有着雄厚的科研背景，目前学校已经开设诸多相关专业。参访同学们由香港中文大学本部的老师带领参观新亚图书馆及大学图书馆，其中新亚书院有天一亭，天人合一，号称香港第二景。依山傍海，美不胜收，虽然是简洁明快的现代建筑风格，但也饱含传统山水园林意境。",
          ],
          width: "531px",
          height: "284px",
          order: 3,
        },
        {
          title: "优必选",
          content: [
            "优必选是中国人工智能和人形机器人研发领域的龙头企业。2018年，优必选估值50亿美元，成为全球估值最高的AI创新企业。同学们首先参观了优必选大楼，认识了阿尔法机器人，编程机器人和可爱的悟空机器人。随后优必选的技术大咖向同学们介绍了优必选公司的发展状况，并热情地为同学们答疑解惑。现场的同学们积极发言，分享观点，讨论热烈。",
          ],
          width: "488px",
          height: "237px",
        },
      ];
      this.dataList2 = [
        "深圳城市安全技术研究院给唐千惠、刘乃嘉、李嘉琪、王珩、郑桓、吴正芃、钱彦兆颁发实习offer。",
        "前海数据给冉娜·叶尔肯、李成远、宋怡凡、张倬瑞、高粤、黄灿辉、郭睿、张筱溪、钟正彦、罗兆洋颁发实习offer。",
        "广发银行给汪颜雯、王泽、邵红恩、陈雨洁、戴嘉佑、陈艺纯、翁世琦、夏紫怡、李思睿、肖鼎文颁发实习offer。",
        "Welab汇立集团给葉昊蘇（港籍）、張敏（港籍）、梁家熙（港籍）、李文翹（港籍）、王海田（港籍）、王善玮（港籍）、王乐心（港籍）、陈泽川、陈东恒、梁致捷、罗淇、席祖平、段非、周程晋、董显奇、郭芙、方越颁发实习offer。",
        "平安壹帐通给程序聪、潘巧芸、朱燕璐、赵敏菁、翁杏子颁发实习offer。",
        "京东科技给董小威、袁伟、王雪、刘诗佳、翁艺薇、张涵颁发实习offer。",
        "平安银行给毕建铭颁发实习offer",
        "平安银行给杨博颁发实习offer",
      ];
    },
    getWidth() {
      let clientWidth = document.body.clientWidth;
      clientWidth = clientWidth >= 1200 ? clientWidth + 100 : 1200;
      this.clientWidth = clientWidth + "px";
      this.left = (clientWidth - 1140) / 2;
    },
  },
  created() {},
  mounted() {
    this.init();
    this.getWidth();
    let that = this;
    window.onresize = function () {
      that.getWidth();
    };
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.container {
  width: 100%;
  position: relative;
  padding-left: 100px;
//   top: -50px;
  .title {
    width: 100%;
    height: 140px;
    background: rgb(110, 175, 255);
    color: #fff;
    font-family: AlibabaPuHuiTi_2_45_Light;
    font-weight: 400;
    display: flex;
    align-items: center;
    position: relative;

    & > div {
      width: 50%;
    }
    .lines {
      width: 1px;
      height: 68px;
      margin: 0 26px;
      background: #fff;
    }
    .title_left {
      text-align: right;
      line-height: 1;
      .title_left_top {
        margin-bottom: 8px;
        font-size: 30px;
      }
      .title_left_bot {
        font-size: 36px;
      }
    }
    .title_right {
      &.ts {
        width: 470px;
        font-size: 18px;
        line-height: 28px;
      }
      &.ts2 {
        font-weight: 400;
        font-size: 26px;
        position: relative;
        left: -0;
        top: 21px;
      }
    }
  }
  .container_item {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 23px 30px;
  }
  .container_item2 {
    display: flex;
    justify-content: center;
  }
  .item3 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 55px;
    .item3_items {
      width: calc(50% - 20px);
      margin-bottom: 25px;
      img {
        width: 100%;
        margin-bottom: 14px;
        display: block;
      }
      p {
        width: 100%;
        font-size: 16px;
        font-family: AlibabaPuHuiTi_2_45_Light;
        font-weight: 400;
        color: #7f7f7f;
        line-height: 18px;
        padding: 0 12px;
        text-align: justify;
      }
    }
  }
  .item2 {
    width: 100%;
    justify-content: center;
    font-size: 22px;
    font-family: AlibabaPuHuiTi_2_85_Bold;
    font-weight: 400;
    color: #000000;
    line-height: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    position: relative;
    img {
      display: block;
    }
    .left,
    .right {
      width: calc((100% - 42px) / 2);
    }
    .left {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      margin-right: 84px;
    }
    .step {
      width: 15px;
      position: absolute;
      width: 15px;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 55px;
    &.item_1 {
      position: relative;
    //   left: -50px;
      .imgBox {
        height: 250px;
        img {
          position: relative;
        //   top: -85px;
        }
      }
    }
  }
  .txtBox {
    padding: 0 40px;
    .titles {
      width: 100%;
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000;
      line-height: 30px;
      padding-bottom: 13px;
      border-bottom: 1px dashed #c8c8c8;
      margin-bottom: 11px;
      display: flex;
      position: relative;
      align-items: flex-end;
      img {
        height: 40px;
        margin-right: 8px;
      }
    }
    .content {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #737373;
      line-height: 24px;
      text-align: justify;
    }
  }
  .imgBox {
    order: 2;
    padding-top: 15px;
  }
}
@media screen and (max-width: 750px) {
  .page {
    .container {
      top: 0;
      padding-left: 0;
      .title {
        display: flex;
        left: 0 !important;
        padding: 0.1rem 0.15rem !important;
        width: 100% !important;
        height: auto !important;
        flex-direction: column;
        align-items: flex-start;
        & > div {
          width: 100%;
        }
        .title_left {
          text-align: left;
        }
        .lines {
          display: none;
        }
        .title_right.ts {
          width: 100%;
        }
        .title_left_top {
          margin-bottom: 0.1rem;
          font-size: 0.2rem;
        }
        .title_left_bot {
          font-size: 0.24rem;
        }
        .title_right{
          &.ts {
            margin-top: 0.1rem;
            font-size: 0.14rem;
            line-height: 0.24rem;
          }
          &.ts2 {
            top: 0;
            margin-top: 0.1rem;
            font-size: 0.14rem;
            line-height: 0.24rem;
          }
        }
      }
      .txtBox {
        padding: 0;
        .titles  {
          margin-top: 0.1rem;
          justify-content: flex-start !important;
        }
      }
      .container_item {
        padding: 0.15rem !important;
        width: auto;
        .item {
          flex-direction: column;
          .imgBox {
            padding-top: 0;
            height: auto;
            img {
              top: 0;
              width: 100% !important;
              height: auto !important;
            }
          }
          &:nth-child(2),
          &:nth-child(5),
          &:nth-child(6),
          &:nth-child(8),
          &:nth-child(10) {
            flex-direction: column-reverse;
          }
          &.item_1 {
            left: 0;
          }
        }
      }
      .item2 {
        flex-direction: column;
        font-size: 0.16rem;
        .step {
          display: none;
        }
        .left,
        .right {
          padding-right: 0;
          width: 100%;
        }
        .img_box {
          margin-top: 0 !important;
          width: 100% !important;
          .txts {
            margin-bottom: 0.2rem !important;
          }
        }
      }
      .item3 {
        padding-top: 0;
        flex-direction: column;
        .item3_items {
          margin-bottom: 0.25rem;
          width: 100%;
          p {
            padding: 0;
            font-size: 0.14rem;
            line-height: 0.2rem;
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
